// 导入创建自定义指令所必须的内置模块Directive
import { Directive } from '@angular/core';
// 导入form表单模块中的一个常量值
import { NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/forms';

@Directive({
    // 选择器，约定指令使用时的类型可以是number,可以带有ngModel属性，名称是percent
    selector: '[percent][type=number][ngModel]',
    // 给指令的宿主设置事件。在输入时执行percentChange， 在焦点离开时执行onTouched
    // host属性可以给宿主元素设置事件，属性
    host: { '(input)': 'percentC hange($event.target.value)', '(blur)': 'onTouched()' },
    // 此指令依赖的其他对象，是依赖注入的另外一种写法，平常providers: [XXXService]是一种简写形式
    providers: [{
        // 提供者名称， angular内置的关于默认值的提供者
        provide: NG_VALUE_ACCESSOR,
        // useExisting属性用来给提供者起一个别名。
        // NG_VALUE_ACCESSOR不好记，PercentDirective自定义的名称（别名）
        // useClass属性用来表示提供者所使用的类
        // useValue属性用来直接注入一个普通的对象
        // 更详细参考：依赖注入方式https://www.angular.cn/docs/ts/latest/guide/dependency-injection.html
        useExisting: PercentDirective,
        multi: true
    }]
})
// DefaultValueAccessor默认值访问器类，用来控制元素的默认值
// 扩展此类，让指令的宿主元素在执行percentChange事件时，调用DefaultValueAccessor
// 类的onChange()事件，把改变的值缩小100

// 当给指令的宿主元素设置值（写值）时，执行wirteValue()事件，把值扩大100倍
export class PercentDirective extends DefaultValueAccessor {
    /**
     * 写入模型时数值缩小100倍
     * @param value  
     */
    public percentChange(value: number) {
        this.onChange(value / 100);
    }

    /**
     * 写入视图时数值扩大100倍
     * @param value 
     */
    public writeValue(value: number) {
        super.writeValue(value * 100);
    }
}